<template>
<!-- 忘记密码 -->
  <div class="content">
     <div class="login_password">
          <img :src="login_pwd" alt="" class="login_ico2">
          <input type="password" placeholder="输入您的原始密码" v-model="old_passwd" maxlength="16" style="width: 280px" @blur="changeOldpasswd">
      </div>
      <div class="login_password">
          <img :src="login_pwd" alt="" class="login_ico2">
          <input v-model="once_passwd" placeholder="请输入新密码" type="password" style="width: 280px" maxlength="16" @blur="change0ncepasswd"/>
      </div>
        <div class="login_password">
          <img :src="login_pwd" alt="" class="login_ico2">
          <input v-model="new_passwd" placeholder="确认新密码" type="password" style="width: 280px" maxlength="16" @blur="changeNewpasswd"/>
      </div>
      <div class="login_footer">
        <div class="login_button" @click="update">
          <!-- <img src="/static/images/login_button.png" alt="" class="button"> -->
          <p class="login_text">确定</p>
        </div>
      </div>
      <i-toast id="toast" />
	  <i-message id="message" />
  </div>
</template>

<script>
import sha256 from '@/utils/sha256'
import api from "@/api/api";
const { $Toast, $Message } = require('../../../static/iview/base');
  export default {
    data () {
      return {
        old_passwd: '',
        once_passwd: '',
        new_passwd: '',
        imgUrl: '',
        login_pwd: ''
      }
    },
    onShow () {
      this.old_passwd = '',
      this.once_passwd = '',
      this.new_passwd = ''
      this.imgUrl = api.imgUrl
      this.login_pwd = this.imgUrl + 'login_pwd.png'
    },
    methods: {
      // 旧密码改变触发
      changeOldpasswd (e) {
        var reg = /^[0-9a-zA-Z]*$/
        let value = e.mp.detail.value
        if (!reg.test(value)) {
          $Toast({
            content: '请输入数字或字母',
            type: 'warning'
          })
          this.old_passwd = value.substring(0, value.length -1)
        }
      },
      // 新密码改变触发
      change0ncepasswd (e) {
        var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
        let value = e.mp.detail.value
        if (!reg.test(value)) {
          $Toast({
            content: '密码8~16位,包含数字和大小写字母',
            type: 'warning'
          })
          // this.once_passwd = value.substring(0, value.length -1)
          this.once_passwd = ''
        }
      },
      // 新密码改变触发
      changeNewpasswd (e) {
        var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
        let value = e.mp.detail.value
        if (!reg.test(value)) {
          $Toast({
            content: '密码8~16位,包含数字和大小写字母',
            type: 'warning'
          })
          // this.new_passwd = value.substring(0, value.length -1)
          this.new_passwd  = ''
        }
      },
      update(){
        var reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/
            if(!this.old_passwd){
                $Toast({
                  content: "请输入旧密码"
                });
                return
            }
            if(!this.once_passwd){
                $Toast({
                  content: "请输入新密码"
                });
                return
            }
            if (!reg.test(this.once_passwd)) {
                $Toast({
                  content: '请输入8~16位密码,包含数字和大小写字母',
                  type: 'warning'
                })
                return
            }
            if(!this.new_passwd){
                $Toast({
                  content: "请再次输入新密码"
                });
                return
            }
            if(this.once_passwd!==this.new_passwd){
                  $Toast({
                    content: "请保证两次密码一致"
                  });
                  return
              }
            if (!reg.test(this.new_passwd)) {
              $Toast({
                content: '请输入8~16位密码,包含数字和大小写字母',
                type: 'warning'
              })
              return
            }
            let old_passwd = sha256.sha256_digest(this.old_passwd);
            let new_passwd = sha256.sha256_digest(this.new_passwd);
            let params = {
                old_passwd:old_passwd,
                new_passwd:new_passwd
            }
            var that = this
            that.$api.update_passwd(params, {'showLoading': true}).then(function (res) {
                    if(res){
                      if(res.code=='0'){
                        $Toast({
                          content: "修改成功"
                        });
                        setTimeout(function() {
                          mpvue.navigateBack(1)
                        }, 1000);
                    }else{
                        $Toast({
                          content: "修改失败"
                        });
                        this.old_passwd = ''
                        this.new_passwd = ''
                        this.once_passwd = ''
                    }
                }else{
                    $Toast({
                      content: "修改失败"
                    });
                    this.old_passwd = ''
                    this.new_passwd = ''
                    this.once_passwd = ''
                }
            })
        }
    }
  }
</script>

<style scoped lang='less'>
.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30rpx;
  height: 100%;
  background: #fff;
  .login_password{
    height: 100rpx;
    width: 80%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    align-items: center;
    .login_ico2{
      width: 34rpx!important;
      height: 39rpx!important;
      margin-right: 30rpx;
    }
    .send_tip{
      font-size:30rpx;
      font-family:PingFangSC;
      font-weight:400;
      color:rgba(37,143,248,1)
    }
  }
}
.login_footer{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
  .login_button{
    width: 90%;
    height: 100rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .button{
      width: 100%;
      height: 100rpx;
    }
  }
   .login_text{
    display: inline-block;
    background: #3F4ADE;
    position: absolute;
    font-size:36rpx;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(255,255,255,1);
    height: 90rpx;
    line-height: 90rpx;
    width:100%;
    text-align: center;
    border-radius: 10rpx;
  }
}
</style>
